<template>
  <div class="dataEdit">
    <vxe-form :data="formData" :ref="el=>{refForm=el}" :rules="Rules[MT.tableName]" size="small">
      <vxe-form-item :visible="false" field="RecordID"></vxe-form-item>
      <vxe-form-item v-for="item in  Fields[MT.tableName]" :key="item.fieldID" :span="8"
                     :title="item.fieldDispName" :visible="item.hidden===0" :field="item.fieldName" :readonley="true"
                     >
        <template #default="{ data }">
          <div v-if="item.dataTypeID===1">
            <vxe-input v-model="data[item.fieldName]" v-show="item.componentID===0" :readonly="1"></vxe-input>
            <el-input size="default" v-show="item.componentID>0" :readonly="1" v-if="item.componentID>0 && [3,6].includes(item.componentType)" type="text" :value="getextend(data,item)">
            </el-input>
            <vxe-select v-if="item.componentID>0 && item.componentType===1"  :readonly="1"     v-model="data[item.fieldName]" placeholder="下拉框" clearable     transfer>
              <vxe-option v-for="(it,index) in Combo[item.fieldName]" :value="it.value" :label="it.label"                          :key="index"></vxe-option>
            </vxe-select>
            <vxe-input v-if="item.componentID>0 && item.componentType===5" v-model="data[item.fieldName]" :readonly="1" placeholder="自动取得编号"   >        </vxe-input>
          </div>
          <vxe-input v-if="item.dataTypeID===2" v-model="data[item.fieldName]" :readonly="1"  placeholder="请输入..." type="integer"  ></vxe-input>
          <vxe-input v-if="item.dataTypeID===3" v-model="data[item.fieldName]" :readonly="1"  placeholder="请输入..." clearable type="float" :digits="item.fieldPrecision"   ></vxe-input>
          <vxe-input v-if="item.dataTypeID===4" v-model="data[item.fieldName]" :readonly="1" transfer placeholder="请输入..." clearable type="date" ></vxe-input>
          <div v-if="[5,10].includes(item.dataTypeID)">
            <vxe-input v-model="data[item.fieldName]" v-show="false"></vxe-input>
            <!-- <vxe-input  :value="getextend(data,item)" placeholder="请选择图片" readonly   class="my-search" @suffix-click="showFiles({item:item ,value:data[item.fieldName],target:formData,ref:MT.tableName,multiple:false,fileType:'images'})" @blur="ValueChange(data,Fields[MT.tableName],item.fieldName)">
              <template #suffix >
                <el-icon><Plus /></el-icon>
              </template>
            </vxe-input> -->
          </div>
          <div v-if="item.dataTypeID===6">
            <vxe-input v-model="data[item.fieldName]" v-show="false"></vxe-input>
            <!-- <vxe-input  :value="getextend(data,item)" placeholder="请选择文件" readonly   class="my-search" @suffix-click="showFiles({item:item ,value:data[item.fieldName],target:formData,ref:MT.tableName,multiple:true,fileType:'files'})" @blur="ValueChange(data,Fields[MT.tableName],item.fieldName)">
              <template #suffix >
                <el-icon><Plus /></el-icon>
              </template>
            </vxe-input> -->
            <el-input size="default" @change="ValueChange(data,Fields[MT.tableName],item.fieldName)" placeholder="请选择文件"
                      type="text" :value="getextend(data,item)">
            </el-input>
          </div>
          <vxe-input v-if="item.dataTypeID===7" v-model="data[item.fieldName]" :readonly="item.editable===0"
                     placeholder="请输入..." clearable></vxe-input>
        </template>
      </vxe-form-item>
      <!-- <vxe-form-item field="Extend" :visible="false"></vxe-form-item> -->
    </vxe-form>
    <div >
      <!--      <vxe-radio-group v-model="selectTab" size="small" style="float: right;margin-top: 10px;margin-left: 10px;">-->
      <!--        <vxe-radio-button v-for="(item ,name) in DT" :label="item.tableName" :content="item.tableDispName"></vxe-radio-button>-->
      <!--      </vxe-radio-group>-->
      <div v-for="(item ,name) in DT">
        <vxe-toolbar v-show="DT.length>0" custom print size="mini" >
          <template #tools><span style="padding-right:30px">{{ item.tableTitle }}</span></template>
        </vxe-toolbar>
        <div>
          <vxe-table border keep-source show-overflow :id="item.tableName" size="small"
                     :edit-rules="Rules[item.tableName]" :column-config="{resizable: true}"
                     :checkbox-config="{highlight: true, range: true}" :data="DetailsData[item.tableName]"
                     :ref="el=>itemRefs[item.tableName]=el"
                     :show-footer="ShowFooter[item.tableName]"
                     :footer-method="footerMethod"
                     :row-config="{isCurrent: true, isHover: true}" :max-height="DT.length>1?'500':'5000'">
            <vxe-column type="seq" align="center" width="60"></vxe-column>
            <vxe-column v-for="it in Fields[item.tableName]" :field="it.fieldName" show-overflow :key="it.fieldID"
                        :title="it.fieldDispName" :formatter="formatData" :visible="it.hidden===0" :edit-render="{}">

            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import {onMounted, reactive, ref, toRefs, watch} from "vue"
import XEUtils from 'xe-utils'
import {all, create} from 'mathjs'
import {useRoute, useRouter} from 'vue-router'
import {Plus} from '@element-plus/icons-vue'
import {editForm} from "/@/api/linkoo/form"

export default {
  props: ['Fields',  'MT', 'DT', 'Combo', 'isequipment', 'Rules', 'ActRules', 'isNew', 'Title','DataSource','load','Linker'],
  setup(props, ctx) {
    let DGE = ref(null)
    let Files = ref(null)
    let refForm = ref(null)
    let router = useRouter()
    const route = useRoute()
    let state = reactive({
      formData: {},
      validateCheck: true,
      OldMData: {},
      OldDData: {},
      selectMainData: {},
      DetailsData: {},
      selectTab: null,
      tableHeight: {},
      resize: 0,
      template: {},
      linker: {},
      rid: route.params.id,
      itemRefs: {},
      toolbarButtons: [
        {code: 'add', name: '新增'}, {code: 'copy', name: '复制'}, {code: 'clear', name: '清空'}, {code: 'delete', name: '删除'}
      ],
      selectDataGridTarget: {},
      selectFiels: {},
      ShowFooter: {},
      FooterFields: {},
      expandcfg: {},
      DataSource: {},
      expandField: [],
      expandData: [],

      // firstload:false
    })
    const math = create(all, {})
    watch(props, (ovl, evl) => {
      if (props.load) {
        Load()
      }
    })
    onMounted(() => {
    })
    const Load = () => {
      // return
      XEUtils.arrayEach(props.DT, row => {
        state.ShowFooter[row.tableName] = false
        if (row['onSheet'] !== '') {
          state.FooterFields[row.tableName] = row['onSheet'].split(',')
          state.ShowFooter[row.tableName] = true
        }
      })
      // if (props.DataSource[props.MT.tableName]) {
      state.OldMData = XEUtils.omit(props.DataSource, 'ChildTables')
      state.formData = XEUtils.omit(props.DataSource, 'ChildTables')
      // }
      if (props.DataSource.ChildTables) {
        state.OldDData = XEUtils.clone(props.DataSource.ChildTables, true)
        state.DetailsData = XEUtils.clone(props.DataSource.ChildTables, true)
      }
      props.DT.forEach(row => {
        state.tableHeight[row.tableName] = 120
      })


    }
    const getextend = (data, field) => {
      //  console.log(data,field);
      let extend = XEUtils.toStringJSON(data['Extend'] ? data['Extend'] : '{}')
      if (extend[field.fieldName] === undefined) {
        extend[field.fieldName] = data[field.fieldName]
        //  console.log(data,extend,field.fieldName,"1234567890987654321");
        data['Extend'] = XEUtils.toJSONString(extend)
      }
      //   console.log(XEUtils.get(extend,field.fieldName),"pppppp");
      return extend[field.fieldName]
    }
    const footerMethod = ({$table, columns, data}) => {
      const tablename = $table.props.id
      if (state.ShowFooter[tablename]) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 0) {
              return '合计'
            }
            if (state.FooterFields[tablename].includes(column.property)) {
              return sumNum(data, column.property)
            }
            return null
          })
        ]
      }
      }

    return {
      ...toRefs(state)
      , Load,
      XEUtils,
      DGE,
      Files,
      Plus,
      refForm,
      getextend,
      footerMethod,

    }
  }
}
</script>

<style scoped>
.expand-wrapper {
  padding: 10px;
}
.index {
  position: absolute
}

.my-search.vxe-input .vxe-input--suffix {
  width: 33px;
  text-align: center;
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  cursor: pointer;
  right: 0px;
}

.my-search.vxe-input .vxe-input--inner {
  border: 1px solid #dcdfe6;
}

.stable {
  padding: 10px;
  box-sizing: border-box;
}

.ke {
  background-color: #ffffff;
  border: 1px dashed #3b3b3b;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
}

.ke .lie {
  display: flex;
  margin: 5px 0;
  align-items: center;
}

.ke .lie span {
  width: 90px;
}

.ke .lie input {
  flex: 1;
  height: 30px;
  border: 1px solid rgb(152, 152, 152);
  border-radius: 3px;
}

.addbut {
  width: 100%;
}

.addbut-red:focus, .addbut-red:active {
  border: 1px solid #ff8989;
  background-color: #ff898918;
  color: #ff8989;
}

.addbut-red {
  width: 100%;
  border: 1px solid #ff8989;
  background-color: #ff898918;
  color: #ff8989;
  margin-top: 10px;
}

.m-10 {
  margin-bottom: 10px;
}
</style>